<!--  -->
<template>
  <div class="ue" v-loading="loading">
    <!--这个地方的大小是可以自己控制的-->
    <div :id="id" :style="defaultStyle">
    </div>
  </div>
</template>

<script>
import * as functions from '@/core/functions.js'
export default {
  name: 'ue',
  props: {
    defaultValue: {
      type: String,
      default: ''
    },
    contentChange: {
      type: Function
    },
    contentBlur: {
      type: Function
    },
    id: {
      type: String,
      default: 'editor'
    },
    defaultStyle: {
      type: Object,
      default: function () {
        return { 'width': '100%', 'min-height': '380px', 'max-height': '480px' }
      }
    },
    toolbarsType: {
      type: String,
      default: 'systemContent'
    },
    // 编辑器加载完成后执行的方法
    editorReady: {
      type: Function,
      default: () => { }
    },
    defaultHeight: {
      type: Number,
      default: 300
    }
  },
  data () {
    return {
      editor: null,
      loading: true,
      hostSetupThen: null
    }
  },
  mounted () {
    functions.hostSetup().then(rsp => {
      if (toolbars[this.toolbarsType]) {
        let toolbar = toolbars[this.toolbarsType]
        if (!toolbar || !toolbar.toolbars) {
          return
        }
        if (this.toolbarsType === 'systemContent' || this.toolbarsType === 'componentRichtext') {
          let video = parseInt(rsp.video)
          if (!isNaN(video) && video === 1) {
            if (toolbar.toolbars[1].indexOf('insertvideo') === -1) {
              toolbar.toolbars[1].push('insertvideo')
            }
          }
        }
        this.editor = window.UE.getEditor(this.id, toolbar)
      } else {
        this.editor = window.UE.getEditor(this.id)
      }

      // 设置编辑器默认内容
      this.editor.addListener('ready', () => {
        this.editor.setContent(this.defaultValue)
        this.editorReady()
        this.editor.setHeight(this.defaultHeight)
        this.loading = false
      })
      // 改变
      if (typeof this.contentChange === 'function') {
        this.editor.addListener('contentChange', () => {
          this.contentChange(this.getUEContent(), this.id)
        })
      }
      // 焦点弹出
      if (typeof this.contentBlur === 'function') {
        this.editor.addListener('blur', () => {
          this.contentBlur(this.getUEContent(), this.id)
        })
      }

      if (typeof this.hostSetupThen === 'function') {
        this.hostSetupThen()
        this.hostSetupThen = null
      }
    })
  },
  methods: {
    // 获取编辑器中的内容
    getUEContent () {
      return this.editor.getContent()
    },
    // 设置内容
    setUEContent (content) {
      if (this.editor) {
        if (this.editor.isReady) {
          this.editor.setContent(content)
        } else {
          this.editor.addListener('ready', () => {
            this.editor.setContent(content)
          })
        }
      } else {
        // 如果editor不是一个对象的时候，塞入到方法当中，生成对象后执行该方法
        this.hostSetupThen = () => {
          if (this.editor.isReady) {
            this.editor.setContent(content)
          } else {
            this.editor.addListener('ready', () => {
              this.editor.setContent(content)
            })
          }
        }
      }
    },
    // 源码模式返回富文本模式
    sourcetotext () {
      if (this.editor && this.editor.queryCommandState('source') === 1) {
        this.editor.execCommand('source')
      }
    }
  },
  destroyed () {
    // 将editor进行销毁
    this.editor.destroy()
  }
}

const toolbars = {
  // 系统内容编辑区域显示
  'systemContent': {
    // 这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
    toolbars: [[
      'anchor', // 锚点
      'undo', // 撤销
      'redo', // 重做
      'removeformat', // 清除格式
      'bold', // 加粗
      'indent', // 首行缩进
      'italic', // 斜体
      'underline', // 下划线
      'strikethrough', // 删除线
      'forecolor', // 字体颜色
      'backcolor', // 背景色
      'fontfamily', // 字体
      'subscript', // 下标
      'fontborder', // 字符边框
      'superscript', // 上标
      // 'formatmatch', // 格式刷
      'justifyleft', // 居左对齐
      'justifyright', // 居右对齐
      'justifycenter', // 居中对齐
      'justifyjustify', // 两端对齐
      'insertorderedlist', // 有序列表
      'insertunorderedlist', // 无序列表
      'fullscreen', // 全屏
      'directionalityltr', // 从左向右输入
      'directionalityrtl', // 从右向左输入
      'rowspacingtop', // 段前距
      'rowspacingbottom', // 段后距
      'lineheight', // 行间距
      'blockquote', // 引用
      'pasteplain', // 纯文本粘贴模式
      'selectall', // 全选
      'horizontal', // 分隔线
      'edittip ', // 编辑提示
      'autotypeset', // 自动排版
      // 'pagebreak', // 分页
      'print', // 打印
      'preview'// 预览
    ],
    [
      'inserttable', // 插入表格
      'insertrow', // 前插入行
      'insertcol', // 前插入列
      'mergeright', // 右合并单元格
      'mergedown', // 下合并单元格
      'edittable', // 表格属性
      'edittd', // 单元格属性
      'deleterow', // 删除行
      'deletecol', // 删除列
      'splittorows', // 拆分成行
      'splittocols', // 拆分成列
      'splittocells', // 完全拆分单元格
      'deletecaption', // 删除表格标题
      'inserttitle', // 插入标题
      'mergecells', // 合并多个单元格
      'deletetable', // 删除表格
      'cleardoc', // 清空文档
      'insertparagraphbeforetable', // 表格前插入行
      'time', // 时间
      'date', // 日期
      'link', // 超链接
      'unlink' // 取消链接
    ],
    [
      'customstyle', // 自定义标题
      'insertcode', // 代码语言
      'fontsize', // 字号
      'paragraph', // 段落格式
      'simpleupload', // 单图上传
      'insertimage', // 多图上传
      'emotion', // 表情
      'spechars', // 特殊字符
      'searchreplace', // 查询替换
      'map', // Baidu地图
      'gmap', // Google地图
      'imagenone', // 默认
      'imageleft', // 左浮动
      'imageright', // 右浮动
      'imagecenter', // 居中
      'touppercase', // 字母大写
      'tolowercase', // 字母小写
      // 'attachment', // 附件
      // 'background', // 背景
      'template', // 模板
      'source' // 源代码
    ]]
  },
  'componentText': {
    // 这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
    toolbars: [[
      'bold', // 加粗
      'indent', // 首行缩进
      'italic', // 斜体
      'underline', // 下划线
      'strikethrough', // 删除线
      'forecolor', // 字体颜色
      'fontfamily', // 字体
      'fontsize', // 字号
      'justifyleft', // 居左对齐
      'justifyright', // 居右对齐
      'justifycenter', // 居中对齐
      'justifyjustify', // 两端对齐
      'rowspacingtop', // 段前距
      'rowspacingbottom', // 段后距
      'lineheight', // 行间距
      'removeformat', // 清除格式
      'horizontal', // 分隔线
      'link' // 超链接
    ]],
    maximumWords: 250,
    pasteplain: true // 是否默认为纯文本粘贴
  },
  'componentRichtext': {
    // 这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
    toolbars: [[
      'anchor', // 锚点
      'undo', // 撤销
      'redo', // 重做
      'removeformat', // 清除格式
      'bold', // 加粗
      'indent', // 首行缩进
      'italic', // 斜体
      'underline', // 下划线
      'strikethrough', // 删除线
      'forecolor', // 字体颜色
      'backcolor', // 背景色
      'fontfamily', // 字体
      'subscript', // 下标
      'fontborder', // 字符边框
      'superscript', // 上标
      // 'formatmatch', // 格式刷
      'justifyleft', // 居左对齐
      'justifyright', // 居右对齐
      'justifycenter', // 居中对齐
      'justifyjustify', // 两端对齐
      'insertorderedlist', // 有序列表
      'insertunorderedlist', // 无序列表
      'fullscreen', // 全屏
      'directionalityltr', // 从左向右输入
      'directionalityrtl', // 从右向左输入
      'rowspacingtop', // 段前距
      'rowspacingbottom', // 段后距
      'lineheight' // 行间距
    ],
    [
      'blockquote', // 引用
      'pasteplain', // 纯文本粘贴模式
      'selectall', // 全选
      'horizontal', // 分隔线
      'edittip ', // 编辑提示
      'autotypeset', // 自动排版
      // 'pagebreak', // 分页
      'print', // 打印
      'preview', // 预览
      'inserttable', // 插入表格
      'insertrow', // 前插入行
      'insertcol', // 前插入列
      'mergeright', // 右合并单元格
      'mergedown', // 下合并单元格
      'edittable', // 表格属性
      'edittd', // 单元格属性
      'deleterow', // 删除行
      'deletecol', // 删除列
      'splittorows', // 拆分成行
      'splittocols', // 拆分成列
      'splittocells', // 完全拆分单元格
      'deletecaption', // 删除表格标题
      'inserttitle', // 插入标题
      'mergecells', // 合并多个单元格
      'deletetable', // 删除表格
      'cleardoc', // 清空文档
      'insertparagraphbeforetable', // 表格前插入行
      'time', // 时间
      'date', // 日期
      'link', // 超链接
      'unlink' // 取消链接
    ],
    [
      'customstyle', // 自定义标题
      'insertcode', // 代码语言
      'fontsize', // 字号
      'paragraph', // 段落格式
      'simpleupload', // 单图上传
      'insertimage', // 多图上传
      'emotion', // 表情
      'spechars', // 特殊字符
      'searchreplace', // 查询替换
      'map', // Baidu地图
      'gmap', // Google地图
      'imagenone', // 默认
      'imageleft', // 左浮动
      'imageright', // 右浮动
      'imagecenter', // 居中
      'touppercase', // 字母大写
      'tolowercase', // 字母小写
      // 'attachment', // 附件
      // 'background', // 背景
      'template', // 模板
      'source' // 源代码
    ]]
  },
  'componentOthertext': {
    // 这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
    toolbars: [[
      'bold', // 加粗
      'indent', // 首行缩进
      'italic', // 斜体
      'underline', // 下划线
      'strikethrough', // 删除线
      'forecolor', // 字体颜色
      'fontfamily', // 字体
      'fontsize', // 字号
      'justifyleft', // 居左对齐
      'justifyright', // 居右对齐
      'justifycenter', // 居中对齐
      'justifyjustify', // 两端对齐
      'rowspacingtop', // 段前距
      'rowspacingbottom', // 段后距
      'lineheight', // 行间距
      'removeformat', // 清除格式
      'horizontal', // 分隔线
      'link', // 超链接
      'simpleupload', // 单图上传
      'source' // 源代码
    ]],
    pasteplain: true // 是否默认为纯文本粘贴
  }
}
</script>

<style scoped>
.ue {
  line-height: normal;
}
</style>
<style>
.ue * {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
</style>
